<style>
#uploadBtnHolder,#uploadBtnHolder2{display: block;width: 60px;height: 60px;}
</style>
<div class="page_title">
    <h2 class="fl">{$pageTitle}</h2>
    <a class="fr top_rt_btn iconfont iconfont-chexiao" href="{:U('admin/Syncdata/index')}">返回列表</a>
</div>
<section>
<div class="cont_col_lt" style="width: 59%;max-width: 59%;">
    <ul class="ulColumn2">
        <li>
            <span class="item_name" style="width:220px;">接口名称：</span>
            <span>{$info.description}</span>
            <!--<span class="errorTips"></span>-->
        </li>
        <li>
            <span class="item_name" style="width:220px;">接口请求地址：</span>
            <input name="url" type="text" class="textbox textbox_295" value="{$info.value.url}"  placeholder="请填写完整的请求地址"/>
        </li>
        <li>
            <span class="item_name" style="width:220px;">接口请求方式：</span>
            <select class="select fontBold" name="method">
                <option value="post" {eq name="info.value.method" value="post"}selected{/eq}>POST</option>
                <option value="get" {eq name="info.value.method" value="get"}selected{/eq}>GET</option>
            </select>
        </li>
        <li>
            <span class="item_name" style="width:220px;">请求头部：</span>
            <ul style="display: inline-table" id="headerParams">
            {notempty name="info.value.header"}
                {volist name="info.value.header" id="vo"}
                    <li>
                        <input type="text" class="textbox textbox_295 key" value="{$key}" placeholder="参数名" /> : 
                        <input type="text" class="textbox textbox_295 value" value="{$vo}" placeholder="参数值" />
                        <span class="iconfont iconfont-jian1 admin_litem_del"></span>
                    </li>
                {/volist}
            {/notempty}
            <li><span class="iconfont iconfont-jia1 admin_litem_add" alt="点击添加参数" title="点击添加参数"></span></li>
             </ul>
            <!--<span class="errorTips"></span>-->
        </li>
        <li>
            <span class="item_name" style="width:220px;">请求参数：</span>
            <ul style="display: inline-table" id="dataParams">
            {notempty name="info.value.data"}
                {volist name="info.value.data" id="vo"}
                    <li>
                        <input type="text" class="textbox textbox_295 key" value="{$key}" placeholder="参数名" /> : 
                        <input type="text" class="textbox textbox_295 value" value="{$vo}" placeholder="参数值" />
                        <span class="iconfont iconfont-jian1 admin_litem_del"></span>
                    </li>
                {/volist}
            {/notempty}
            <li><span class="iconfont iconfont-jia1 admin_litem_add" alt="点击添加参数" title="点击添加参数"></span></li>
             </ul>
            <!--<span class="errorTips"></span>-->
        </li>
        <li>
            <span class="item_name" style="width:220px;">调试功能：</span>
            <!--<span class="status" style="color:#38B018;"><i class="iconfont iconfont-{eq name='info.status' value='1'}zhengque{else /}cuowu{/eq}"></i></span>-->
            <span class="status"></span>
            <input type="button"  class="link_btn" id="checkApi" value="接口测试" />
            <!--<input type="hidden" name="status" value="{$info.status}" />-->
            
        </li>
        <li style="display: none;">
            <span class="item_name" style="width:220px;">返回结果：</span>
            <div class="checkApiRes border">
            <pre></pre>
            </div>
        </li>
        <li>
            <span class="item_name" style="width:220px;"></span>
            <input type="submit" class="link_btn edit" value="提交修改"/>
        </li>
    </ul>
</div>
<div class="cont_col_rt" style="max-width: 40%;margin-top: 10px;">
    <ul style="display: inline-table;line-height: 1.6;">
        <li style="font-size: 18px;">
            <span>配置说明</span>
        </li>
        <li style="margin-top: 18px;">
            <span>一、请求头部：</span>
            <div class="tishi" style="display: block;">
                <a>解析规则：解析头部参数名称时,将在所有大写英文字母前加上'_'连接字符,整个参数名都将被转为大写,转换后的结果将列入header头部验证;参数值取配置值</a>
                <p>配置举例：</p>
                <p>如何添加 AUTH_TOKEN 头部验证,并规定值为 '123456'</p>
                <p>1.点击“+”按钮</p>
                <p>2.在参数名位置输入 AuthToken</p>
                <p>3.在参数值位置输入 123456 即可完成配置</p>
            </div>
        </li>
        <li style="margin-top: 18px;">
            <span>二、请求参数：</span>
            <div class="tishi" style="display: block;">
                <a>解析规则：解析请求体参数名称时,参数名和参数值均不做任何处理(严格区分大小写)</a>
                <p>配置举例：</p>
                <p>如何添加 userName 参数,并规定值为 'admin'</p>
                <p>1.点击“+”按钮</p>
                <p>2.在参数名位置输入 userName</p>
                <p>3.在参数值位置输入 admin 即可完成配置</p>
                <a>备注：举例中的配置参数名为userName,参数值为admin,因为此处严格区分大小写,故发送给客户服务器时,参数名称为userName</a>
            </div>
        </li>
        <li style="margin-top: 18px;">
            <span>三、接口测试功能：</span>
            <div class="tishi" style="display: block;">
                <a>使用接口测试功能时,请返回一个json格式的数据,否则将有可能无法正常测试</a>
            </div>
        </li>
    </ul>
</div>
    <div style="display: none;" id="addHtml">
        <li>
            <input type="text" class="textbox textbox_295 key" value="" placeholder="参数名" /> : 
            <input type="text" class="textbox textbox_295 value" value="" placeholder="参数值" />
            <span class="iconfont iconfont-jian1 admin_litem_del"></span>
        </li>
    </div>
</section>
<script>
$(function(){
    var user_data_get_conf = '{$info.value.url}';
    var conf_stauts = '{$info.status}';
    /**
    $('input[name="url"]').die().bind('input propertychange',function(){
        if($(this).val() == user_data_get_conf){
            $(".status").show();
            $("#checkApi").slideUp();
            $(".status").remove_spanError();
            $('input[name="status"]').val(conf_stauts);
        }else{
            $(".status").hide();
            $("#checkApi").val('检测');
            $("#checkApi").slideDown();
            $('input[name="status"]').val('');
        }
    });**/
    $(".admin_litem_add").click(function(){
        var addHtml = $("#addHtml").html();
        $(this).parent().before(addHtml);
    });
    $(".admin_litem_del").die().live('click',function(){
        $(this).parent().remove();
    });
    /** 点击检测API地址 **/
    $("#checkApi").click(function(){
        var data = $.extend({},{
                value:{}
           },{
                value:{
                    url:$('input[name="url"]').val(),
                    method:$('select[name="method"]').val(),
                    header:getInputValues($("#headerParams")),
                    body:getInputValues($("#dataParams"))
                }
           });
      
       var send_data = {
            url:U('admin/Syncdata/checkApiUrl'),
            type:'POST',
            data:data
       }
        send_ajax(send_data,function(res){
           if(res.status ==1){
             //地址可用
             //$(".status").show();
            // $("#checkApi").hide();
             $(".status").remove_spanError();
             //$('input[name="status"]').val('1');
             var json = JSON.parse(res.data);
             $(".checkApiRes pre").html(syntaxHighlight(json));
             $(".checkApiRes").parent().show();
           }else{
             //$(".status").hide();
             $(".checkApiRes").parent().hide();
             $("#checkApi").val('重新调试');
             $(".status").spanError('地址不可用,请检查地址是否填写正确!');
             //$('input[name="status"]').val('');
           }
        });
    });
    /** 点击提交 **/
    $('input[type="submit"]').click(function(){
       var data = $.extend({},{
                status:'',
                config_id:'{:encrypt_id($info.config_id)}',
                value:{}
           },{
                status:$('input[name="status"]').val(),
                value:{
                    url:$('input[name="url"]').val(),
                    method:$('select[name="method"]').val(),
                    header:getInputValues($("#headerParams")),
                    body:getInputValues($("#dataParams"))
                }
           });
      if(data.value.header === false || data.value.body === false){
          msg_info('请将参数和值填写完整','',1800);
          return false;
       }
       var send_data = {
            url:U('admin/Syncdata/save'),
            type:'POST',
            data:data
       }
       send_ajax(send_data,function(res){
            if(res.status == 1){
                msg_success(res.data.info,'',1000);
                setTimeout(function(){
                    admin.getContentByUrl(res.data.jumpurl);
                },1000);
            }else{
                msg_error(res.message);
            }
       })
    });
    //获取多个输入框的值
    function getInputValues(f_obj){
        var inputArr = f_obj.find('.key');
        var res = [];
        var is_return = false;
        if(inputArr.length > 0){
            inputArr.each(function(i){
                var _key = $(this).val();
                var _value = $(this).next(".value").val();
                if(!_key || !_value){
                    is_return = true;
                    return false;
                }
                var item = '{"'+_key+'":"'+_value+'"}';
                res[i] = $.parseJSON(item);
            });
            if(is_return === true){
                return false;
            }
        }
        return res;
    }
})
</script>